<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>存钱</title>
    <!-- 引入 jQuery 库 -->
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <style>
        /* 全局样式，设置字体、背景颜色和布局 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f4f4f9;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        /* 表单容器样式 */
        #deposit-form {
            background-color: #fff;
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            width: 300px;
        }

        /* 标题样式 */
        h2 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }

        /* 输入组样式 */
        .input-group {
            margin-bottom: 20px;
        }

        /* 标签样式 */
        .input-group label {
            display: block;
            margin-bottom: 5px;
            color: #666;
        }

        /* 输入框样式 */
        .input-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        /* 按钮样式 */
        button {
            width: 100%;
            padding: 10px;
            background-color: #007BFF;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        /* 按钮悬停效果 */
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>

<body>
    <!-- 存钱表单 -->
    <form id="deposit-form">
        <h2>存钱</h2>
        <!-- 金额输入组 -->
        <div class="input-group">
            <label for="num">存入金额</label>
            <input type="text" placeholder="请输入您要存入的金额" id="num">
        </div>
        <!-- 密码输入组 -->
        <div class="input-group">
            <label for="pwd">交易密码</label>
            <input type="password" placeholder="请输入您的交易密码" id="pwd">
        </div>
        <!-- 提交按钮 -->
        <button type="button" id="btn1" onclick="sub1()">提交</button>
    </form>
    <script>
        function sub1() {
            // 获取输入框的值
            const num = document.getElementById('num').value.trim();
            const pwd = document.getElementById('pwd').value.trim();

            // 验证输入是否为空
            if (!num) {
                alert('金额不能为空!');
                return;
            }
            if (!pwd) {
                alert('密码不能为空!');
                return;
            }

            // 构造数据对象
            const data = {
                money: num,
                password: pwd
            };

            // 使用 jQuery 的 $.get 方法发送请求
            $.get('http://localhost:8080/bank/inMoney', { data: JSON.stringify(data) })
              .done(function (response) {
                    // 弹出服务器返回的消息
                    alert(response);
                    // 如果存钱成功，跳转到业务页面
                    if (response === '存钱成功') {
                        window.open('http://localhost:8080/bank/业务.html', '_self');
                    }
                })
              .fail(function () {
                    // 请求失败时的处理
                    alert('请求失败，请稍后重试');
                });
        }
    </script>
</body>

</html>